<script setup>
import { getImageUrl } from "@/utils";

defineProps({
  myshape: {
    type: String,
    default: "square",
  },
  background: {
    type: String,
    default: "#fff",
  },
  placeholder: {
    type: String,
    default: "请输入关键字搜索",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  showAction: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["customclick", "cancelevent", "valuechange"]);
const handleClickInput = () => {
  emit("customclick");
};
const handleCancelEvent = () => {
  emit("cancelevent");
};

const handleValueChange = (value) => {
  emit("valuechange", value);
};
</script>

<template>
  <div>
    <van-search
      :shape="myshape"
      :background="background"
      :placeholder="placeholder"
      :readonly="readonly"
      @click-left-icon="handleClickInput"
      @click-input="handleClickInput"
      :show-action="showAction"
      @cancel="handleCancelEvent"
      @update:model-value="handleValueChange"
    >
      <template #left-icon>
        <van-image
          class="search-icon"
          :src="getImageUrl('images/input-search-icon.png')"
        />
      </template>
    </van-search>
  </div>
</template>

<style lang="scss" scoped>
:deep(.van-search) {
  padding: 0;
  height: 70px;
}
.search-icon {
  width: 42px;
  height: 42px;
  margin-top: 14px;
}
</style>
